<template>
	<view class="post-container">
		<view class="post-head">
			<view class="search-box">
				<view class="search-input bgFff flex-jus">
					<u-search placeholder="输入你要找的岗位…" v-model="queryParams.stationName" clearabled bgColor="#fff"
						:showAction="false"></u-search>
					<view class="search-btn" @tap="handleSearch">搜索</view>
				</view>
			</view>	
			<view class="filter-box" @click="open">
				<text>筛选</text>
				<view class="filter-icon"></view>
			</view>
		</view>
		<x-skeleton type="list" :loading="loading">
			<view class="common-list" v-if="postList.length">
				<view class="common-item" v-for="item in postList" :key="item.id"
					@click="nologinJump(`/subpage/talentemployment/employment/postinfo?id=${item.id}&careerId=${queryParams.careerId}&type=${type}`)">
					<view class="common-name">
						<text class="name-text">{{ item.stationName }}</text>
						<text class="text-color" v-if="item.salaryRange !== '面议'">{{ item.salaryRange }}元</text>
						<text class="text-color" v-else>面议</text>
					</view>
					<view class="common-label">
						<text>{{ item.stationEdu }}</text>
						<text>{{ item.stationLesson }}</text>
						<text>招{{ item.recruitsNumber }}人</text>
					</view>
					<view class="common-footer">
						<text class="foot-text">{{ item.companyInfo.compName }}</text>
						<text class="foot-address">{{ item.stationAddr }}</text>
					</view>
				</view>
			</view>
			<view v-else class="no-data">
				<text>暂无数据</text>
			</view>
		</x-skeleton>
		
		<view class="popup-container">
			<popup-layer ref="popupRef" direction="top" class="popup-content">
				<view class="popup-content-wrap">
					<view class="popup-item" v-for="(item,index) in dicList" :key="index">
						<text class="popup-subtitle">{{ item.title }}</text>
						<view class="labels">
							<text  
								v-for="(dic, idx) in item.dicts" :key="dic" 
								:class="['popup-label', { 'active': idx === item.activeIndex }]" 
								@tap="handleSelect(item, dic, idx)"
							>{{ dic }}</text>
						</view>
					</view>
					
					<view class="popup-item range">
						<text class="popup-subtitle">薪资范畴</text>
						<view class="labels">
							<input type="number" v-model="startSalary">
							<text class="sprate">至</text>
							<input type="number" v-model="endSalary">
						</view>
					</view>
					<view class="popup-footer">
						<button class="reset-btn" @tap="handleReset">重置</button>
						<button class="submit-btn" @tap="handleSearch">筛选</button>
					</view>
				</view>
			</popup-layer>
		</view>
		
	</view>
</template>

<script>
	import popupLayer from '@/components/popupLayer/index.vue'
	import { serachPost, dictionary } from '@/common/api_employment.js'
	export default {
		components: {
			popupLayer
		},
		data() {
			return {
				loading: true,
				hasMore: true, // 是否有更多数据
				postList: [],
				dicList: [],
				startSalary: '',
				endSalary: '',
				type: '', // type：0正常渠道，1招聘会渠道
				queryParams: {
					stationName: '',
					careerId: '',
					compType: '',
					compScale: '',
					stationEdu: '',
					stationLesson: '',
					stationAddr: '',
					salaryRange: '',
					pageNum: 1,
					pageSize: 10
				}
			}
		},
		onLoad(option) {
			console.log(option, '999')
			this.type = option.type
			this.queryParams.careerId = option.id || ''
			this.getPostList()
			this.getDictionary()
		},
		onReachBottom() {
			console.log('到底了')
			if (this.hasMore) {
				this.getPostList()
			}
		},
		methods: {
			open() {
				// this.boolShow = true
				this.$refs.popupRef.show() 
				console.log(this.$refs.popupRef, 'this.$refs.popup')
				// this.$refs.popup.open()
			},
			// 筛选
			handleSelect(item, dic, idx) {
				item.activeIndex = idx
				this.queryParams[item.field] = dic === '不限' ? '' : dic
				
				console.log(this.dicList, idx, 'handleSelect')
			},
			handleSearch() {
				this.loading = true
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 999
				this.postList = []
				if (this.startSalary && this.endSalary) {
					this.queryParams.salaryRange = this.startSalary + '-' + this.endSalary
				}
				this.getPostList()
			},
			handleReset() {
				for (let key in this.queryParams) {
					if (key !== 'stationName' && key !== 'careerId') {
						this.queryParams[key] = ''
					}
				}
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.startSalary = ''
				this.endSalary = ''
				this.dicList.forEach(item => {
					item.activeIndex = 0
				})
			},
			async getPostList() {
				const postData = await serachPost(this.queryParams)
				if (postData.data.length) {
					this.postList = this.postList.concat(postData.data)
					this.postList.forEach(item => {
						if (item.wrokPlaceType === 1) {
							item.stationAddr = item.companyInfo.compAddr
						}
					})
					this.queryParams.pageNum += 1
					this.loading = false
				} else {
					this.hasMore = false
					this.loading = false
				}
				
				this.$refs.popupRef.close() 
			},
			// dictionary
			async getDictionary() {
				const dictionaryData = await dictionary()
				this.dicList = dictionaryData.data
				this.dicList.forEach(item => {
					item.dicts.unshift('不限')
					item.activeIndex = 0
				})
				console.log(dictionaryData, 'dictionaryData')
			},
		}
	}
</script>

<style lang="scss">
	.post-container {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F5FF;
		box-sizing: border-box;
		.post-head {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			padding: 24rpx 32rpx 32rpx;
			box-sizing: border-box;
			.search-box {
				width: 558rpx;
				height: 96rpx;
				margin-right: 24rpx;
				box-sizing: border-box;
				.search-input {
					border-radius: 40rpx;
				}
				.search-btn {
					width: 160rpx;
					height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					background: #FFDE6D;
					border-radius: 40rpx;
					backdrop-filter: blur(25px);
				}
			}
			.filter-box {
				position: relative;
				width: 144rpx;
				height: 68rpx;
				margin-top: 14rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				text {
					padding-left: 32rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #34314F;
					line-height: 68rpx;
				}
				.filter-icon {
					position: absolute;
					right: 16rpx;
					top: 18rpx;
					width: 32rpx;
					height: 32rpx;
					box-sizing: border-box;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/down-arrow.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}
		.common-list {
			padding: 0 32rpx;
			box-sizing: border-box;
			.common-item {
				width: 100%;
				padding: 28rpx 32rpx 32rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 40rpx;
				.common-name {
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					.name-text {
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 22px;
					}
					.text-color {
						font-weight: 500;
						font-size: 32rpx;
						color: #FF7F1C;
						line-height: 22px;
					}
				}
				.common-label {
					display: flex;
					flex-wrap: nowrap;
					margin-bottom: 24rpx;
					text {
						display: block;
						margin-right: 16rpx;
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						color: #34314F;
						line-height: 32rpx;
						border-radius: 8rpx;
						background-color: #F4F4F4;
						box-sizing: border-box;
					}
				}
				.common-footer {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					.foot-text {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 32rpx;
					}
					.foot-address {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.5);
						line-height: 32rpx;
					}
				}
			}
		}
		
		.popup-content {
			width: 100%;
			height: 600px;
			border-radius: 20px;
			padding: 50rpx 32rpx 40rpx 32rpx;
			box-sizing: border-box;
			overflow-y: auto;
			.popup-content-wrap {
				// position: fixed;
				height: 100%;
				overflow-y: auto;
				width: 100%;
				box-sizing: border-box;
			}
			.popup-item {
				margin-bottom: 28rpx;
				&.range {
					padding-bottom: 80px;
				}
				.popup-subtitle {
					display: block;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
					font-style: normal
				}
				.labels {
					display: flex;
					flex-wrap: wrap;
					.popup-label {
						display: block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						padding: 18rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(52, 49, 79, 0.13);
						&.active {
							color: #FF7F1C;
							border: 1px solid #FF7F1C;
							background: rgba(255,127,28,0.08);
						}
					}
					input {
						width: 200rpx;
						height: 76rpx;
						border-radius: 16rpx;
						text-align: center;
						border: 1px solid rgba(52, 49, 79, 0.13);
					}
					.sprate {
						font-size: 28rpx;
						color: #34314F;
						line-height: 76rpx;
						margin: 0 20rpx;
					}
				}
				
			}
			
			.popup-footer {
				position: fixed;
				bottom: 20rpx;
				left: 0;
				width: 100%;
				display: flex;
				padding-top: 30rpx;
				background-color: #fff;
				justify-content: space-around;
				z-index: 999;
				.reset-btn {
					margin-right: 32rpx;
					background-color: rgba(52, 49, 79, 0.06);
				}
				.submit-btn {
					background-color: rgba(255, 222, 109, 1);
				}
				button {
					width: 268rpx;
					height: 96rpx;
					border-radius: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					&::after {
						border: 0;
					}
				}
			}
		}
	}
</style>